<template>
  <div class="tem-parent">
    <h4>父组件D</h4>
    <childA :name-list="list" style="text-align: left;line-height: 1.5"></childA>
    <grandsonA :foo="foo" :boo="boo" :coo="coo" :doo="doo" title="前端工匠" @parentEvent="parentEvent"></grandsonA>
  </div>
</template>
<script>
//import childA from "./childA";
//import grandsonA from "./grandsonA";
const childA = () => import("./childA")
const grandsonA = () => import("./grandsonA")


export default {
  name: "parentD",
  components: {
    childA,
    grandsonA
  },
  data() {
    return {
      list: ['通信方法:$attrs/$listeners', '$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。', '$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件'],
      foo: "Javascript",
      boo: "Html",
      coo: "CSS",
      doo: "Vue"
    }
  },
  provide:{
    provide1:'provide1',
    provide2:'provide2',
    provide3:'provide3',
    provide4:'provide4',
  },
  methods: {
    parentEvent(){
      return {
        msg:'这是parentD定义的方法',
        data:[1,2,3,4]
      }
    }
  }
}
</script>

<style scoped>
p span {
  color: #42b983;
}
</style>
